<template>
  <div class="scroll-list" @touchstart="touchStar" @touchmove="touchMove" @touchend="touchEnd" @touchcancel="touchEnd">
    <div class="scroll-loading-top" v-if="!disabled" :style="loadingWrapStyle">
        <span :style="{'height':offset + 'px'}">
            <i class="uicon uicon-pull" :class="{'run':loading}"></i>
            <label>{{loading ? '正在加载' : (canLoad ? '释放加载' : '下拉加载' )}}</label>
        </span>
    </div>
    <p class="scroll-tip-wrap" v-if="done.status"></p>
    <p class="scroll-tip" :style="done.style" v-if="done.status">
      {{done.count >0 ? '又发现'+done.count+'条新内容' : '没有发现新数据'}}
    </p>
    <slot></slot>
    <div v-if="!first">
      <label v-if="config.end" class="scroll-bottom-tip list-end">已显示全部数据</label>
      <div v-else class="scroll-bottom-tip">
        <i class="uicon uicon-pull run"></i>
        <label>{{config.bottom ? '加载中...' : '释放加载'}}</label>
      </div>
    </div>
  </div><!-- end scrol-list -->
</template>
<script>
  const supportPageOffset = window.pageXOffset !== undefined;
  const isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

  export default {
    name: 'scroll-list',
    props: {
      disabled: {
        type: Boolean,
        default: false
      },
      config: {
        type: Object,
        defalut: {
          end:false,
          pull: false,
          bottom: false,
        }
      },
      offset: {
        type: Number,
        default: 80
      },
    },
    data() {
      return {
        first:true,
        canPull: false,
        loading: false,
        canLoad: false,
        time: 0,
        moveY: 0,
        y: 0,
        target: '',
        done: {
          status: false,
          count: 0,
          style: {
            top: 0
          }
        }
      }
    },
    computed: {
      loadingWrapStyle() {
        if (this.moveY > 0) {
          this.$parent.$emit('SCORLL_PULL')
        }
        return this.disabled && this.canPull ? {
          'height': '0',
          'transition-duration': '0'
        } : {
          "height": `${this.moveY}px`,
          'transition-duration': `${this.time}ms`
        }
      },
    },
    mounted() {
      let target = document.querySelector(this.config.target);
      if (target) {
        this.target = target;
        target.addEventListener('scroll', this.scrollHandle);
      } else {
        window.addEventListener('scroll', this.scrollHandle)
      }

      this.$on('refresh_done', num => {
        // this.done.count = num;
        // this.done.status = true;
        this.done.style.top = this.$el.getBoundingClientRect().top + 'px'

        setTimeout(() => {
          this.done.status = false;
        }, 2000)
      })

      this.$on('pulling',()=>{
        this.move(this.offset, 0);
        this.load(() => {
          this.loading = false;
          this.canLoad = false;
          this.move(0);
        });
      })
    },
    destroyed() {
      window.removeEventListener('scroll', this.scrollHandle)
    },
    methods: {
      load(cb) {
        if (this.config.pull) return false;
        this.loading = true;
        this.$emit('pull', cb);
      },
      isTop() {

        return this.target ? this.target.scrollTop == 0 : this.scrollY() == 0;
      },
      scrollY() {
        return this.target ? this.target.scrollTop : (supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement
          .scrollTop : document.body.scrollTop);
      },
      scrollHandle(e) {
        let y = this.scrollY();
        this.checkLoadMore(y);
      },
      checkLoadMore(y) {
        if (this.config.bottom) return false;

        //是否滚动到到底部
        let winH = this.target ? this.target.offsetHeight : window.innerHeight;
        let bodyH = this.target ? this.target.scrollHeight : document.documentElement.scrollHeight || document.body.scrollHeight;
        if (bodyH > winH && y == bodyH - winH) {
          if(this.first) this.first = false;
          this.$emit('bottom');
        }
      },
      touchStar(e) {
        if (this.disabled) return false;
        if (this.isTop()) {
          this.canPull = true;
        } else {
          this.canPull = false;
        }

        this.y = e.touches[0].pageY;

      },
      touchMove(e) {
        if (!this.canPull || this.disabled) {
          return false;
        }
        if (this.disabled || this.loading) {
          return false;
        }


        let curY = e.touches[0].pageY,
          movY = curY - this.y;
        if (movY >= 0) {
          e.preventDefault();
          e.stopPropagation();
          this.canLoad = movY >= this.offset;
          movY = movY > 100 ? 100 : movY;
          this.move(movY, 0)
        }
      },
      touchEnd(e) {
        if (this.disabled) return false;
        if (this.moveY >= this.offset) {
          this.$emit('pulling')
        } else {
          this.move(0);
        }
        this.y = 0;

      },
      move(y, time = 300) {
        this.moveY = y;
        this.time = time;
        //    this.time == 300 && setTimeout(()=>{
        //         this.move(0)
        //    },300)

      }
    }
  }

</script>
<style lang="less" scoped>
  .scroll-loading-top {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    color: #c6c6c6;
    font-size: 24px;
    overflow: hidden;
    transition-property: height;

    span {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex-grow: 0;
      flex-shrink: 0;

      label {
        margin-top: 20px;
      }
    }


  }

  .scroll-tip-wrap {
    height: 70px;
  }

  .scroll-tip {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    left: 0;
    right: 0;
    font-size: 30px;
    color: #fff;
    height: 70px;
    background-color: rgba(256, 107, 64, .94);
  }

  .scroll-bottom-tip {
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #919191;
    font-size: 24px;
  }

</style>
